<template>
  <div class="container">
    <back-header
      class="header"
      title="视频参数"
      :needConfirm="true"
    ></back-header>
    <el-form
      ref="detailForm"
      :model="formData"
      label-width="120px"
      class="grid"
      :rules="rules"
    >
      <div>
        <el-form-item label="模板名称" prop="templateName">
          <el-input
            v-model="formData.templateName"
            :maxlength="10"
            style="width: 200px"
            placeholder="请输入模板名称"
          />
        </el-form-item>
        <el-form-item label="状态" prop="statusMark">
          <dict-select
            v-model="formData.statusMark"
            dict-key="process_status"
          />
        </el-form-item>
        <el-form-item label="自动转码" prop="autoTranscoding">
          <dict-radio v-model="formData.autoTranscoding" dict-key="yes_no" />
        </el-form-item>
        <el-form-item label="清晰度" prop="resolution">
          <el-radio-group
            v-model="formData.customResolution"
            @change="resolutionTypeChange"
          >
            <el-radio :label="0">预设</el-radio>
            <el-radio :label="1">自定义</el-radio>
          </el-radio-group>
          <div
            v-if="formData.customResolution === 1"
            class="custom-ratio mt-25"
          >
            <div>
              <span class="ration-label"> 宽</span>
              <el-input-number
                :controls="false"
                v-model="formData.width"
                :max="99999"
                :min="1"
                :step="1"
                class="ninput mr-15"
                step-strictly
                @change="lengthChange('width', $event)"
              />
            </div>
            <div>
              <span class="ration-label">x</span>
              <span class="ration-label">高</span>
              <el-input-number
                step-strictly
                :controls="false"
                v-model="formData.height"
                :max="99999"
                :min="1"
                :step="1"
                class="ninput"
                @change="lengthChange('height', $event)"
              />
            </div>
            <div class="ratio-checkbox">
              <el-checkbox v-model="lock" @change="resolutionTypeChange"
                >约束比例</el-checkbox
              >
            </div>
          </div>
          <el-radio-group
            v-model="formData.resolution"
            v-if="formData.customResolution === 0"
            class="ratio-group mt-25"
          >
            <el-radio
              :label="item.value"
              v-for="item in resolutionMap"
              :key="item.id"
              >{{ item.label }}</el-radio
            >
          </el-radio-group>
          <!-- <dict-radio
            v-model="formData.resolution"
            dict-key="resolution_type"
          /> -->
        </el-form-item>
      </div>
      <div>
        <el-form-item label="封装格式" prop="videoType">
          <dict-select v-model="formData.videoType" dict-key="video_type" />
        </el-form-item>
        <el-form-item label="视频编码" prop="videoCodec">
          <dict-select v-model="formData.videoCodec" dict-key="video_codec" />
        </el-form-item>
        <el-form-item label="码率">
          <el-input-number
            step-strictly
            :controls="false"
            v-model="formData.bitrate"
            :max="2048"
            :min="5"
            :step="1"
            class="mr-15 text-right"
          />kbps
        </el-form-item>
        <el-form-item>
          <div class="tip">
            请根据视频宽高比估算视频码率，视频的码率会尽量接近设定值，但实际码率不能保证和设定值完全一致，尤其当设定的码率过大或过小时。
          </div>
        </el-form-item>
        <el-form-item label="视频帧率">
          <el-input-number
            step-strictly
            :controls="false"
            v-model="formData.frameRate"
            :max="120"
            :min="5"
            :step="1"
            class="mr-15 text-right"
          />
          fps
        </el-form-item>
        <el-form-item label="视频GOP">
          <el-input-number
            step-strictly
            :controls="false"
            v-model="formData.gop"
            :max="3000"
            :min="10"
            :step="1"
            class="mr-15 text-right"
          />
          帧
        </el-form-item>
        <el-form-item>
          <div class="tip">
            取值范围在1～3000之间，GOP越大，延时越高；GOP越小，可能会导致卡顿。
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div class="btns">
      <el-button type="primary" @click="saveData">保存</el-button>
      <el-button plain type="primary" @click="btnLeave">取消</el-button>
    </div>
  </div>
</template>

<script>
import BackHeader from "@/components/BackHeader/index";
import DictSelect from "@/components/DictSelect";
import DictRadio from "@/components/DictRadio";
import { vaildateInput } from "@/utils/validate";
import leave from "@/views/_mixins/leave";
import { detail, edit, add } from "@/api/system-config/video-transcode";
const defaultForm = {
  templateName: "",
  statusMark: 1,
  autoTranscoding: 1,
  resolution: 1,
  statusMark: 1,
  videoType: "mp4",
  videoCodec: 1,
  bitrate: 1000,
  frameRate: 30,
  gop: 10,
  width: 1920,
  height: 1080,
  customResolution: 0,
};
export default {
  name: "transcode-video-form",
  components: {
    BackHeader,
    DictSelect,
    DictRadio,
  },
  mixins: [leave],
  data() {
    return {
      ratio: 1,
      lock: true,
      formData: {},
      rules: {
        templateName: [
          { required: true, message: "模板名称不能为空" },
          { validator: vaildateInput, trigger: ["blur", "change"] },
        ],
      },
      resolutionMap: [
        {
          label: "480P标清（宽度自适应，高度480）",
          value: 1,
        },
        {
          label: "576P标清（宽度自适应，高度576）",
          value: 2,
        },
        {
          label: "720P准高清（宽度自适应，高度720）",
          value: 3,
        },
        {
          label: "1080P高清SDR（宽度自适应，高度1080）",
          value: 4,
        },
        {
          label: "1080P高清HDR（宽度自适应，高度1080）",
          value: 5,
        },
        {
          label: "4K 超高清SDR（宽度自适应，高度2160）",
          value: 6,
        },
        {
          label: "4K 超高清HDR（宽度自适应，高度2160）",
          value: 7,
        },
        {
          label: "8K 超高清SDR（宽度自适应，高度4320）",
          value: 8,
        },
        {
          label: "8K 超高清HDR（宽度自适应，高度4320）",
          value: 9,
        },
      ],
    };
  },
  created() {
    this.$id = this.$route.query.id;
    this.$id ? this.getData() : (this.formData = { ...defaultForm });
  },
  methods: {
    getData() {
      detail(this.$id, this.formData).then((res) => {
        this.formData = res;
      });
    },
    saveData() {
      this.$refs.detailForm.validate((valid) => {
        if (valid) {
          if (this.$id) {
            edit(this.$id, this.formData).then(() => {
              this.$message.success("编辑成功!");
              this.$router.back();
            });
          } else {
            add(this.formData).then(() => {
              this.$message.success("新增成功!");
              this.$router.back();
            });
          }
        }
      });
    },
    lengthChange(type, val) {
      if (this.lock) {
        if (type == "width") {
          this.formData.height = Math.floor(val / this.ratio);
        }
        if (type == "height") {
          this.formData.width = Math.floor(val * this.ratio);
        }
      }
    },
    resolutionTypeChange(type) {
      if (type) {
        if (!this.formData.height || !this.formData.width) {
          this.formData.width = 1920;
          this.formData.height = 1080;
        }
        this.ratio = this.formData.width / this.formData.height;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 50px;
}
.header {
  margin-bottom: 30px;
}
.container {
  padding: 20px 18px;
  background-color: #fff;
  min-height: 100%;
  position: relative;
}
.ratio-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.custom-ratio {
  display: flex;
}
.ratio-checkbox {
  margin-left: 35px;
}
.ninput {
  width: 85px;
}
.ration-label {
  margin-right: 15px;
}
.mt-25 {
  margin-top: 25px;
}
.mr-15 {
  margin-right: 15px;
}
.tip {
  font-weight: 400;
  color: #8d8d8d;
  line-height: 23px;
  font-size: 12px;
}
.btns {
  position: absolute;
  left: 28px;
  bottom: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.text-right {
  :deep(.el-input) {
    input {
      text-align: right;
    }
  }
}
</style>
